<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>体验</title>
    </head>
    <body>

        <h3>体验React</h3>
        
        <div class="root"></div>
        
        <!-- 先导入 React 核心库 -->
        <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
        <!-- 书写自己的JavaScript代码 -->
        <script type="text/javascript">
            console.log( Object.getOwnPropertyNames( React ) );
            console.log( React );
            // 创建元素
            // React.createElement( 元素名称 , 元素的属性集 , ...子节点 );
            const element = React.createElement( 
                'p' , 
                { id: '9527' , title: '这是一个段落' } , 
                React.createElement( 'span' , null , '自从王阿姨来了以后，' ),
                React.createElement( 'span' , null , '就把我们的高端端带坏了，' ),
                React.createElement( 'span' , null , '这是个纯属虚构的故事...' )
            );

            let node = document.querySelector( '.root' );

            // 将创建好的 element 挂载到 node 节点上
            ReactDOM.render( element , node );
        </script>
        
    </body>
</html>